/*
 * @Author: cygao
 * @Date: 2018-11-10 21:08:25
 * @Last Modified by: cygao
 * @Last Modified time: 2018-11-25 22:41:43
 */

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import { Toast } from 'react-weui';
import { connect } from "react-redux";
import * as actions from '../../../store/action/category';
import './cateList.less';

class Register extends Component {
    constructor() {
        super()
        this.state = {
          searchValue: '', // 搜索输入值
          sideList: [1,2,3,4,5,6,7,8,9,10],
          activeIndex: 0
        }
    }
    componentDidMount(){
      // if(!this.props.category.fetched){
        this.props.fetchCategory();
      // }
    }
    // 搜索
    changeSearch(e) {
      this.setState({
        searchValue : e.target.value
      })
    }
    // enter触发搜索
    KeyUpEnter(e) {
      // 监控 enter 事件
      if (e.keyCode !== 13) {
        return
      }
      if (e.target.value) {
        this.props.history.push(`/categoryDetail/${e.target.value}`);
      }else {
        alert('搜索条案不能为空')
      }
    }
    clickCate(item, index){
      document.getElementsByClassName('cate-right')[0].scrollTop = document.getElementById(`i${item.id}`).offsetTop - 48;
      this.setState({
        activeIndex: index
      })
    }
    render() {
        return (
            <div id="category-list">
              <Toast icon="loading" show={this.props.category.fetching}>Loading...</Toast>
                {/* 搜索框区域 */}
                <div className="cate-search">
                  <div className="search-text-title">分类</div>
                  <div className="search-input">
                    <img className="logo-search" src={require('../../../static/images2/logo-search.png')} alt="" />
                    <input
                        type="text"
                        name="phoneNumber"
                        placeholder="输入您需要的商品名称"
                        onChange={this.changeSearch.bind(this)}
                        onKeyUp={this.KeyUpEnter.bind(this)}
                        value={this.state.searchValue}
                    />
                  </div>
                </div>
                <div className="cate-data">
                  <div className="cate-left">
                      {this.props.category.list?this.props.category.list.map((item, index) => {
                        return <div className={ this.state.activeIndex === index ? 'left-item active': 'left-item' } key={index} onClick={ this.clickCate.bind(this, item, index) }>{item.title}</div>
                      }):""}
                  </div>
                  <div className="cate-right">
                  {this.props.category.list?this.props.category.list.map((item, index) => {
                    return <div id={`i${item.id}`}>
                      <div className="cate-title">{ item.title }</div>
                      <div className="cate-list">
                        {item.children.map((i, ind) => {
                          return  <Link to={`/categoryDetail/${i.title}`}> <div className="cate-item"
                                  key={ind}>
                                    <img src={i.cate_img} alt=""/>
                                    <span>{i.title}</span>
                                  </div>
                                  </Link>
                        })}
                      </div>
                  </div>
                  }):""}
                  </div>
                </div>
            </div>
        )
    }
}

export default connect((state)=>{return {...state}}, actions)(Register);